<template>
  <div class="login">
    <Head />
    <div class="banner">
      <img src="../assets/login.png" alt="这是一张banner图">
    </div>
    <div class="user">
      <div class="choose">
        <div :class="[isActive==1?'active':'']" @click="choose(1)">短信登录</div>
        <div :class="[isActive==2?'active':'']" @click="choose(2)">密码登录</div>
      </div>
      <div class="msgLogin" v-if="isActive==1" >
        <div class="username">
          <van-field class="tel"
            v-model="telNum"
            label-class="labelText"
            border:true
            label="+86"
            label-width="6rem"
            label-align="left"
            maxlength="11"
            :error-message="errMsg"
            placeholder="请输入手机号码"
          >
            <van-button slot="button" size="small" type="primary" @click="getCode">发送验证码</van-button>
          </van-field>
        </div>
        <div class="password">
          <van-field v-model="telCode" type="password"
            center
            label-class="labelText"
            label="验证码"
            label-width="6rem"
            label-align="cnter"
            maxlength="6"
            :error-message="errCode"
            placeholder="请输入验证码"
          />
        </div>
      </div>
      <div class="pwdLogin" v-if="isActive==2">
        <div class="username">
          <van-field v-model="username" label="账号：" 
          center 
          label-class="labelText"
          label-width="6rem" 
          label-align="cnter"
          placeholder="请输入用户名"></van-field>
        </div>
        <div class="password">
          <van-field v-model="password" type="password" label="密码：" 
          center
          label-class="labelText"
          label-width="6rem" 
          label-align="cnter" 
          placeholder="请输入密码"
          :error-message="errPwd"
          ></van-field>
        </div>
      </div>
    </div>
    <div class="confirm">
        <van-button block @click="verify" v-if="isActive==1">
          验证登录
        </van-button>
        <van-button block @click="affirm" v-if="isActive==2">
          确认登录
        </van-button>
    </div>
    <div class="declare" v-if="isActive==1">
      使用未注册手机号登录时，将自动注册馨怡甜品账号，且认为您已同意&lt;&lt;馨怡用户协议&gt;&gt;
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon,Button,Field} from 'vant';
import 'vant/lib/index.css';
import Head from '../components/Head.vue'

Vue.use(Icon);
Vue.use(Button);
Vue.use(Field);
export default {
  name: 'Login',
  data(){
    return {
      telNum:'',
      telCode:'',
      username:'',
      password:'',
      errMsg:'',
      errCode:'',
      errPwd:'',
      isActive:1
    }
  },
  methods: {
    getCode(){
      if(!(/^1[3456789]\d{9}$/.test(this.telNum))){
        this.errMsg="请输入正确手机号"
      }else{
        this.errMsg="";
        var data=this.qs.stringify({
            tel:this.telNum
        })
        this.axios({
            method:'post',
            url:'/api/getCode',
            data:data
          })
          .then((res) =>{
              if(res.data.data){
                var tel=res.data.data[0].tel;
                this.$cookies.set('userId',tel,'1d')
              }else{
                errCode='登录失败，请重新登录'
              }
          })
          .catch((error)=> {
              console.log(error);
          });
      }
    },
    choose(i){
      this.isActive=i;
    },
    verify(){
      var data=this.qs.stringify({
        telCode:this.telCode,
            tel:this.telNum
        })
      this.axios({
          method:'post',
          url:'/api/login',
          data:data
        })
        .then((res)=> {
            if(res.data.state==0){
              this.$router.push({name: 'Mine'});
              this.$cookies.set('userId',this.telNum,'1d');
              this.telCode='',
              this.telNum=''
            }
        })
        .catch((error)=> {
            console.log(error);
        });
      },
      affirm(){
        this.axios.get('/api/login2',{
          params:{
            username:this.username,
            password:this.password
          }}).then((res)=> {
            if(res.data.data[0]){
              var tel=res.data.data[0].tel
              this.$router.push({name: 'Mine'});
              this.$cookies.set('userId',tel,'1d');
              this.username='',
              this.password=''
            }else{
              errPwd='用户名或者密码错误'
            }
        }).catch((error)=> {
            console.log(error);
        });
      }
  },
  components:{
    Head
  }
}
</script>

<style scoped lang="less">
@borderColor:rgb(233, 233, 233);
.login{
  width: 100%;
  height: auto;

  .banner{
    width: 100%;
    height: 12rem;
    margin-top: .5rem;

    img{
      width: 100%;
      height: 12rem;
    }
  }

  .user{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 1rem;
    // border-top: .05rem solid rgb(233, 233, 233);
    border-bottom: .05rem solid @borderColor;

    .choose{
      width: 100%;
      height: 5rem;
      line-height: 5rem;
      font-size: 1.8rem;
      font-weight: bold;
      display: flex;
      border-bottom: .05rem solid @borderColor;

        div{
          flex: 1;
          text-align: center;

          &.active{
            border-bottom: .2rem solid #ed5051;
          }
        }
      } 

    .username{
      width: 33.5rem;
      margin: auto;
      border-bottom: .05rem solid @borderColor;

      button{
        width: 9.5rem;
        height: 3rem;
        line-height: 3rem;
      }
    }

    .password{
      width: 33.5rem;
      margin: auto;
      border-bottom: .05rem solid @borderColor;
    }
  }

  .confirm{
    width: 33.5rem;
    height: 4.4rem;
    margin: 2rem auto;

    button{
        background: #ed5051;
        color: white
    }
  }
  .declare{
    width: 33.5rem;
    height: 2rem;
    line-height: 2rem;
    font-size: .7rem;
    margin: 0 auto;
    color: rgb(167, 164, 164);
  }
}

</style>
